<template>
  <div>
    <div id="handleBar" style="text-align: right">
      <slot />
    </div>
    <div class="fixedBar" v-show="handleBarFixed" style="text-align: right">
      <slot />
    </div>
  </div>
</template>

<script>
  export default {
    name: "FixedBar",
    props: {
      options: {
        type: Array,
        default: null,
      }
    },
    data(){
      return {
        //固定的 提交操作栏目
        handleBarFixed: false,
      }
    },
    computed: {
      values() {
        if (this.value) {
          return Array.isArray(this.value) ? this.value : [this.value];
        } else {
          return [];
        }
      },
    },
    mounted(){
      //监听滚动事件
      window.addEventListener('scroll', this.handleScroll)
    },
    destroyed () {
      window.removeEventListener('scroll', this.handleScroll)
    },
    methods:{
      //页面滚动事件
      handleScroll () {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        const offsetTop = document.querySelector('#handleBar').offsetTop;
        const headerTop = document.querySelector('.app-main').offsetTop;
        // console.log(offsetTop,headerTop)
        this.handleBarFixed = headerTop ? scrollTop > (offsetTop+headerTop) : scrollTop>5; // offsetTop0是导航标题头的高度

        //设置 固定元素 top 值
        const fixedBar = document.querySelector('.fixedBar');
        fixedBar.style.top = offsetTop -15 +'px';   //15是margin 待优化
      },
    }
  };
</script>
<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
</style>
